<!-- 确认订单 -->
<template>
  <view class="order-wrap">
    <!-- 地址栏 -->
    <view
      class="head_box"
      @tap="jump('/pages/user/address/list',{jumptype:2})">
      <view class=" u-flex u-flex-1" v-if="!addressId">
        <view class="box-bg u-p-30 u-flex-1 u-flex">
		  <image class="select-image" :src="$IMG_URLT + 'confirm_01.png'"></image>
          <text class="select-notice">请选择收货地址</text>
          <text
            class="u-iconfont uicon-arrow-right"
            style="color: #bfbfbf;margin-left:auto;"
          ></text>
        </view>
      </view>
      <view class="add-address-box u-p-30 u-flex u-row-between" :style="{background: `url(${$IMG_URLT})confirm_02.png no-repeat`}" v-else>
        
        <view class="detail  ">
          <view class="address">
			  <text class="tag" v-show="addressData.is_default == 1">默认</text>
            {{ addressData.province_name }}{{ addressData.city_name
            }}{{ addressData.area_name }}{{ addressData.address }}
          </view>
          <view class="top u-flex">
            <text class="name">{{ addressData.consignee }}</text>
            <text class="phone">{{ addressData.phone }}</text>
            
          </view>
        </view>
		<text
		  class="u-iconfont uicon-arrow-right"
		  style="color: #bfbfbf"
		></text>
      </view>
    </view>

    <view class="u-m-b-10">
      <!-- 确认订单商品卡片 -->
      <view class="goods-list" :key="g.sku_price_id">
        <view class="goods-card">
			<image class="imgs" :src="perGoodsList.image"></image>
			<view class="goods-card-box">
				<view class="title">{{perGoodsList.cat_code}}</view>
				<view class="icon">
					<view class="icon_list colorone">{{perGoodsList.breed_name}}</view>
					<view class="icon_list colortwo">{{perGoodsList.age}}天</view>
					<view class="icon_list2 colorthr"><image :src="perGoodsList.gender=='公'?`${$IMG_URLT}category_03.png`:`${$IMG_URLT}category_04.png`"></image></view>
				</view>
				<!-- <view class="text">{{item.introduce}}</view> -->
				<!-- <view class="text">{{perGoodsList.name}}</view>
				<view class="u-flex u-row-between">
					<view class="icon">{{perGoodsList.breed}}</view>
					<view class="iconlist">{{perGoodsList.breed}}</view>
				</view> -->
				<text class="order-num">
				  {{ perGoodsList.price }}
				</text>
			</view>
        </view>

		<view class="logistic item-list u-flex u-row-between"> <!-- @tap="onSelExpressType(g)" -->
		  <view class="item-title">支付方式</view>
		  <view class="u-flex">
		    <view class="detail" @tap="show=true">周期付</view>
		    <!-- <text
		      class="u-iconfont uicon-arrow-right"
		      style="color: #bfbfbf"
		    ></text> -->
		  </view>
		</view>
        <!-- 配送方式 -->
        <view class="logistic item-list u-flex u-row-between"> <!-- @tap="onSelExpressType(g)" -->
          <view class="item-title">配送方式</view>
          <view class="u-flex">
            <view class="detail">快递</view>
            <!-- <text
              class="u-iconfont uicon-arrow-right"
              style="color: #bfbfbf"
            ></text> -->
          </view>
        </view>
		<view class="logistic item-list2"> <!-- @tap="onSelExpressType(g)" -->
		  <view class="item-title">买家留言</view>
		  <view class="u-flex">
		    <u-input v-model="remark" height="236" type="textarea" auto-height="true" :custom-style="{'background':'rgba(248,248,248,0.88)','padding':'20rpx 24rpx','border-radius':'16rpx','width':'654rpx','height':'236rpx'}" />
		  </view>
		</view>
      </view>
    </view> 

    <!-- 底部 -->
    <view class="foot-box-wrap">
      <view class="foot-box u-flex u-row-between safe-area-inset-bottom">
        <view class="u-flex">
          <!-- <text class="num">共{{ totalNum }}件</text> -->
          <view class="all-money">
            <!-- <text>合计：</text> -->
            <text class="price">{{ perGoodsList.price || "0.00" }}</text>
          </view>
        </view>
        <button
          class="cu-btn sub-btn"
          @tap="subOrder"
          :disabled="isDisabled"
          hover-class="btn-hover"
        >
          去签约
        </button>
      </view>
    </view>
	<u-popup v-model="show" mode="bottom" length="auto" border-radius="14" closeable="true">
		<view>
			<view class="poptitle">周期付介绍</view>
			<view class="poptext">这里就是全部关于周期付的介绍，后台需要有可进行配置的位置，富文本编辑器</view>
		</view>
	</u-popup>
    
    
  </view>
</template>

<script>
import shSelectCoupon from "./components/sh-select-coupon.vue";
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
import Auth from "@/shopro/permission/index.js";
export default {
  components: {
    shSelectCoupon,
  },
  data() {
    return {
      addressData: {}, //收货地址
      addressId: null, //收货地址ID
      isDisabled: false, //提交
      grouponBuyType: "alone",
      perGoodsList: {}, //确认单订单商品
      remark: "",
	  show:false
    };
  },
  computed: {
	  
  },
  onShow() {
	  // 监听选择自提点
	  // uni.$once("SELECT_STORE", (res) => {
	  //   this.storeInfo = JSON.parse(res.storeInfo);
	  // });
	// 监听地址
    uni.$on("SELECT_ADDRESS", (res) => {
      if (res.addressData) {
        this.addressData = JSON.parse(res.addressData);
        this.addressId = this.addressData.id;
      } else {
        this.addressId = 0;
      }
      // this.getPre();
      res.addressData && uni.$off("SELECT_ADDRESS");
    });
  },
  async onLoad() {
	this.perGoodsList=this.$Route.query.goodsList
	console.log(222,this.perGoodsList)
    await this.init();
  },
  methods: {
    ...mapActions(["getCartList"]),

    // 初始化
    init() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      return Promise.all([
        this.getDefaultAddress(),
        // this.initDate(),
        // this.getCoupons(),
      ]).then(() => {
        uni.hideLoading();
      });
    },
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas
      });
    },
    // 提交订单
    subOrder() {
      let that = this;
      that.isDisabled = true;
      that
        .$http(
          "goods.cats_orderorders",
          {
            cat_id: that.perGoodsList.id,
            address_id: that.addressId,
            message: that.remark,
            
          },
          "提交中..."
        )
        .then((res) => {
          that.isDisabled = false;
          if (res.code === 1) {
            that.$Router.replace({
              path:`/pages/order/payment/resulttwo`,
            });
            
          }
        });
    },

    // 初始地址
    getDefaultAddress() {
      this.$http("address.defaults", {}, "", false).then((res) => {
        if (res.code === 1 && res.data) {
          this.addressData = res.data;
          this.addressId = res.data.id;
		  console.log(1111,this.addressData)
        }
        // this.getPre();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 发票弹窗
.invoice-modal {
  width: 750rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  height: 700rpx;
  overflow: visible;

  .invoice-foot {
    .price-title {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }

    .price-num {
      font-size: 28rpx;
      font-weight: 500;
      color: #eab662;
    }

    .cancel-btn {
      width: 335rpx;
      line-height: 74rpx;
      background: rgba(238, 238, 238, 1);
      border-radius: 37rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }

    .save-btn {
      width: 335rpx;
      line-height: 74rpx;
      background: linear-gradient(
        90deg,
        rgba(233, 180, 97, 1),
        rgba(238, 204, 137, 1)
      );
      border-radius: 37rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }

  .invoice-head {
    width: 100%;
    height: 80rpx;
    background: #f8e3bd;
    border-radius: 20rpx 20rpx 0 0;

    .head-nav {
      width: (750rpx/2);
      position: relative;
      height: 100%;
    }

    .nav-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #666;
      position: relative;
      z-index: 6;
    }

    .nav-title--active {
      color: #a8700d;
      font-size: 26rpx;
    }

    .head-nav--active {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      background: #fff;
      width: 100%;
      height: 80rpx;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0px 0px;

      &::after {
        content: "";
        display: block;
        width: 40rpx;
        height: 80rpx;
        position: absolute;
        transform: skewX(20deg);
        background: #fff;
        border-top-right-radius: 20rpx;
        top: 0;
        right: -15rpx;
      }

      &::before {
        content: "";
        display: block;
        width: 40rpx;
        height: 80rpx;
        position: absolute;
        transform: skewX(-20deg);
        background: #fff;
        border-top-left-radius: 20rpx;
        top: 0;
        left: -15rpx;
      }
    }
  }
}

// 收货地址栏
.head_box {
	width: 702rpx;
	margin: 0 auto;
  background-color: #fff;
  border-radius: 16rpx;
  margin-top:20rpx;
}
.select-image {
    width: 48rpx;
	height: 48rpx;
	margin-right:16rpx;
  }
  .select-notice {
    font-size: 32rpx;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 600;
    color: #222222;
  }
.add-address-box {
  min-height: 100rpx;
  // background: url("@/static/images/confirm_02.png") no-repeat;
  background-size: 100% auto;
  background-position: bottom center;
  .select-notice {
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 40rpx;
  }

  .name,
  .phone {
    font-size: 28rpx;
    font-weight: 500;
	color:#555;
  }

  .phone {
    margin: 0 20rpx;
  }

  .tag {
    background: #FBB03B;
    border-radius: 8rpx;
    padding: 8rpx 12rpx;
    // line-height: 38rpx;
    color: #111111;
    font-size: 22rpx;
	margin-right:10rpx;
  }

  .detail {
    .address {
      width: 590rpx;
      font-size: 32rpx;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #222222;
	  margin-bottom: 16rpx;
	  overflow:hidden;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 2;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
    }
  }
}

// 备注
.remark-box {
  margin-top: 20rpx;
  background: #fff;
  padding: 25rpx;

  .item-input {
    flex: 1;
    text-align: end;
    font-size: 28rpx;
  }

  .input-pl {
    color: #c4c4c4;
  }
}

// 商品卡片
.goods-list {
	width: 702rpx;
	border-radius: 16rpx;
	margin:0 auto;
  background: #fff;
  margin-top: 20rpx;

  .goods-card {
    box-sizing: border-box;
	padding:32rpx 32rpx;
	display: flex;
	align-items: center;
	.imgs{
		width: 180rpx;
		height: 180rpx;
		border-radius: 15rpx;
		display: block;
	}
	.goods-card-box{
		width: 458rpx;
		height: 180rpx;
		margin-left:16rpx;
		display: flex;
		flex-direction: column;
		.title{
			font-size: 28rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #111111;
		}
		.icon{
			margin-top:16rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.icon_list{
				padding:0rpx 12rpx;
				height:42rpx;
				line-height:42rpx;
				font-size: 22rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				margin-right:10rpx;
			}
			.icon_list2{
				height:42rpx;
				line-height:42rpx;
				padding:0rpx 8rpx;
				display: flex;
				align-items: center;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.colorone{
				color: #F69B0E;
				background: rgba(251,176,59,0.12);
			}
			.colortwo{
				color: #E60000;
				background: rgba(230,0,0,0.09);
			}
			.colorthr{
				color: #F69B0E;
				background: rgba(83,0,230,0.09);
			}
			
		}
		.order-num{
			align-items: flex-end;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #111111;
			margin-top:auto;
			::before{
				content: "¥";
				font-size: 28rpx;
			}
		}
	}
	
	.iconlist{
		font-size: 24rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #999999;
		margin-top:16rpx;
	}
    .goods-price {
      font-size: 30rpx;
      font-weight: 500;
      width: 458rpx;
      color: #333333;

      .goods-num {
        font-size: 28rpx;
        color: #c4c4c4;
      }
    }

    .order-sku {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      width: 440rpx;
      margin-bottom: 20rpx;

      .order-num {
        margin-right: 10rpx;
      }
    }
  }
}
.item-list2{
	background: #fff;
	margin: 0 25rpx;
	padding:40rpx 0 32rpx 0;
	.u-flex{
		margin-top:28rpx;
	}
}
.item-list {
  height: 100rpx;
  background: #fff;
  margin: 0 25rpx;

  .item-title {
    font-size: 28rpx;
    margin-right: 20rpx;

    .activity-title {
      font-size: 26rpx;
      color: #999;
    }
  }

  .detail {
    font-size: 28rpx;
    color: #333;
  }

  .origin-price {
    font-size: 26rpx;
    color: #666;
    text-decoration: line-through;
  }

  .price {
    font-size: 26rpx;
    color: #ff0000;
    margin-right: 40rpx;
  }

  .sel-coupon {
    font-size: 26rpx;
    color: #c4c4c4;
    margin-right: 20rpx;
  }
}

.logistic,
.price-box,
.remark-box,
.score,
.coupon {
  border-top: 1rpx solid rgba(#dfdfdf, 0.5);
}

.poptitle{
	font-size: 36rpx;
	color: #111111;
	margin:0 40rpx;
	margin-top:48rpx;
}
.poptext{
	height: 700rpx;
	font-size: 28rpx;
	color: #444444;
	margin:0 40rpx;
	margin-top:22rpx;
}

.border-top {
  border-top: 1rpx solid rgba(#dfdfdf, 0.5);
}

.foot-box-wrap {
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  position: relative;
  width: 100%;
  z-index: 70;
}

.foot-box {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  border-top: 1rpx solid #eeeeee;
  background-color: #fff;
  z-index: 998;
  bottom: 0;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  padding: 0 30rpx;
  padding-bottom:25rpx;
  .btn-hover {
    color: #fff;
  }

  .num {
    font-size: 26rpx;
    color: #999;
  }

  .all-money {
    // margin: 0 60rpx 0 20rpx;
	font-size: 34rpx;
	color: #E60000;
    .price {
		font-size: 46rpx;
		color: #111111;
		:before{
			content: "¥";
			font-size: 34rpx;
		}
    }
  }

  .sub-btn {
    width: 420rpx;
    height: 92rpx;
	line-height: 92rpx;
    background: #FBB03B;
    border-radius: 49rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #111111;
  }
}

// 弹窗之配送方式
// 配送方式
.express-type {
  width: 750rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  height: 700rpx;
  overflow: visible;

  .express-type__head {
    width: 100%;
    height: 80rpx;
    background: #f8e3bd;
    border-radius: 20rpx 20rpx 0 0;

    &-nav {
      width: (750rpx/4);
      position: relative;
      height: 100%;
    }

    .head-nav--active {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      background: #fff;
      width: 100%;
      height: 80rpx;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0px 0px;

      &::after {
        content: "";
        display: block;
        width: 40rpx;
        height: 80rpx;
        position: absolute;
        transform: skewX(20deg);
        background: #fff;
        border-top-right-radius: 20rpx;
        top: 0;
        right: -15rpx;
      }

      &::before {
        content: "";
        display: block;
        width: 40rpx;
        height: 80rpx;
        position: absolute;
        transform: skewX(-20deg);
        background: #fff;
        border-top-left-radius: 20rpx;
        top: 0;
        left: -15rpx;
      }
    }

    .head-nav__left--active {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      background: #fff;
      width: 100%;
      height: 74rpx;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0px 0px;

      &::after {
        content: "";
        display: block;
        width: 40rpx;
        height: 74rpx;
        position: absolute;
        transform: skewX(20deg);
        background: #fff;
        border-top-right-radius: 20rpx;
        top: 0;
        right: -15rpx;
      }
    }

    .head-nav__right--active {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      background: #fff;
      width: 100%;
      height: 74rpx;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0px 0px;

      &::before {
        content: "";
        display: block;
        width: 40rpx;
        height: 74rpx;
        position: absolute;
        transform: skewX(-20deg);
        background: #fff;
        border-top-left-radius: 20rpx;
        top: 0;
        left: -15rpx;
      }
    }

    .head-nav__title {
      font-size: 24rpx;
      font-weight: 500;
      color: #666;
      position: relative;
      z-index: 6;
    }

    .head-nav__title--active {
      color: #a8700d;
      font-size: 26rpx;
    }
  }

  .express-type__content {
    .empty-address {
      height: 120rpx;
      padding: 0 25rpx;
      font-size: 28rpx;

      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }

    // 无定位
    .location-box {
      height: 500rpx;
      justify-content: center;

      .nolocation-img {
        width: 74rpx;
        height: 90rpx;
        margin-bottom: 40rpx;
      }

      .location-title {
        font-size: 35rpx;

        font-weight: bold;
        color: rgba(70, 53, 27, 1);
        margin-bottom: 20rpx;
      }

      .location-tip {
        font-size: 28rpx;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 40rpx;
      }

      .open-location {
        width: 492rpx;
        line-height: 70rpx;
        background: linear-gradient(
          90deg,
          rgba(233, 180, 97, 1),
          rgba(238, 204, 137, 1)
        );
        box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
        border-radius: 35rpx;
        font-size: 28rpx;

        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }

    // 快递
    .express-address {
      position: relative;
      padding: 30rpx 25rpx;
      background: url($IMG_URL + "/imgs/order/address_bg.png") no-repeat;
      background-size: 430rpx 300rpx;
      background-position: top right;

      .express-top {
        margin-bottom: 20rpx;
        width: 550rpx;
        text-align: left;

        .address {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 40rpx;
          text-align: left;
		  
        }

        .dispatch-notice {
          font-size: 28rpx;

          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 40rpx;
          text-align: left;
        }

        .address-location {
          position: absolute;
          right: 60rpx;
          top: 30rpx;

          .location-img {
            width: 80rpx;
            height: 90rpx;
          }

          .location-text {
            font-size: 18rpx;

            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }
        }

        .tag {
          background: rgba(233, 191, 113, 0.2);
          border-radius: 6rpx;
          padding: 0 16rpx;
          line-height: 38rpx;
          color: #a8700d;
          font-size: 22rpx;
          margin-right: 20rpx;
        }

        .tag1 {
          background: rgba(53, 190, 105, 0.2);
          border-radius: 6rpx;
          padding: 0 16rpx;
          line-height: 38rpx;
          color: #1bbc50;
          font-size: 22rpx;
          margin-right: 20rpx;
        }

        .address-guide {
          position: absolute;
          right: 25rpx;
          top: 40rpx;
          color: #999999;
        }
      }

      .express-content {
        margin-bottom: 20rpx;

        .box-line {
          width: 1rpx;
          height: 61rpx;
          border-left: 1rpx solid rgba(238, 238, 238, 1);
          margin: 0 40rpx;
        }

        .phone-box1 {
          .name,
          .phone {
            font-size: 26rpx;

            font-weight: 400;
            color: rgba(102, 102, 102, 1);
          }

          .phone {
            margin-left: 20rpx;
          }
        }

        .time-box,
        .phone-box {
          text-align: left;
          min-height: 120rpx;

          .box-title {
            font-size: 24rpx;

            font-weight: 400;
            color: #666;
            padding-bottom: 10rpx;
          }

          .box-text {
            font-size: 24rpx;

            font-weight: 500;
            color: #333;
          }

          .edit-phone {
            width: 160rpx;
            font-size: 24rpx;

            font-weight: 500;
            color: #333;
          }

          .box-icon {
            font-size: 28rpx;
            color: #999;
            display: inline-block;
            width: 40rpx;
            text-align: center;
            line-height: 40rpx;
          }
        }
      }

      .express-bottom {
        .protocol {
          font-size: 24rpx;

          font-weight: 400;
          color: rgba(102, 102, 102, 1);

          .protocol-text {
            color: #6487a4;
          }
        }
      }
    }
  }

  .express-type__bottom {
    height: 90rpx;
    padding: 0 30rpx;

    .cancel-btn {
      width: 335rpx;
      line-height: 74rpx;
      background: rgba(238, 238, 238, 1);
      border-radius: 37rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }

    .save-btn {
      width: 335rpx;
      line-height: 74rpx;
      background: linear-gradient(
        90deg,
        rgba(233, 180, 97, 1),
        rgba(238, 204, 137, 1)
      );
      border-radius: 37rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}

// 选择配送给时间
.checkTime-box {
  background: rgba(255, 255, 255, 1);
  border-radius: 20rpx 20rpx 0px 0px;
  height: 720rpx;
  text-align: center;

  .checkTime-head {
    font-size: 32rpx;

    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 100rpx;
    position: relative;
  }

  .checkTime-foot {
    height: 100rpx;

    .save-btn {
      width: 690rpx;
      line-height: 80rpx;
      background: linear-gradient(
        90deg,
        rgba(240, 199, 133, 1),
        rgba(246, 214, 157, 1)
      );
      border-radius: 40rpx;
      font-size: 30rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }

  .checkTime-content {
    .checkTime-content__left {
      height: 100%;
      width: 190rpx;
      background: #f5f5f5;

      .left-item {
        font-size: 26rpx;

        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        height: 100rpx;
        width: 100%;
      }
    }

    .checkTime-content__right {
      flex: 1;
      height: 100%;
      overflow-y: auto;

      .right-item {
        font-size: 26rpx;

        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        width: 100%;
        text-align: center;
        border-bottom: 1rpx solid rgba(#dfdfdf, 0.6);
        margin: 0 30rpx;
        line-height: 100rpx;
      }
      .right-item-none {
        font-size: 32rpx;
        font-weight: 500;
        color: #999999;
        width: 100%;
        text-align: center;
        margin-top: 200rpx;
      }
    }

    .item--active {
      font-size: 26rpx;
      font-weight: 500;
      color: rgba(168, 112, 13, 1) !important;
      background-color: #fff;
    }
  }
}
</style>
